<template>
	<div class="footer" id="footer">
		<div class="footer-top">
			<div class="footer-top-wrapper">
				<div class="footer-top-left">
					<div class="footer-org">
						<h5>{{ En ? 'Members of the Conference Organizing Committee' : '大会组委会成员' }}
							<text class="small" :style="{ display: En ? 'block' : 'line' }">{{ En ? '(Listed in no particular order)' : '（排名不分先后）' }}</text>
						</h5>
						<div class="imgs">
							<image class="img" v-for="index in nums" :key="index" :src="`https://static.inclusionconf.com/static/images/org-2025-${index}.png`" alt="" mode="widthFix">
						</div>
					</div>
					<h5>{{ isPc ? $t('foot1') : $t('footWap1') }}</h5>
					<ul>
						<li @click="showEwm = true"><img class="img" src="https://static.inclusionconf.com/static/images/gzh.png" alt=""><span>{{ $t('footIcon1') }}</span></li>
						<li @click="toWb"><img class="img" src="https://static.inclusionconf.com/static/images/wb.png" alt=""><span>{{ $t('footIcon2') }}</span></li>
						<li @click="toXhs"><img class="img" src="https://static.inclusionconf.com/static/images/foot-xhs.png" alt=""><span>{{ $t('footIcon4') }}</span></li>
					</ul>
				</div>
				<div class="footer-top-right">
					<div class="right-item" v-for="(item, index) in list" :key="index">
						<div class="title">{{ item['title' + En] }}</div>
						<div class="item" v-for="(ite, ind) in item.children" :key="index + 'c' + ind">
							<div class="h3">{{ ite['title' + En] }}</div>
							<div class="p" v-for="(it, i) in ite.children">{{ it['title' + En] }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-bottom" v-if="En">Privacy Policy · ICP License: <a href="https://beian.miit.gov.cn" target="_blank">Shanghai ICP Registration No. 19001705-2</a> Copyright © 2025 Inclusion·Conference on The Bund</div>
		<div class="footer-bottom" v-else>《隐私权政策》· ICP备案号：<a href="https://beian.miit.gov.cn" target="_blank">沪ICP备19001705号-2</a> Copyright© 2025 Inclusion·外滩大会</div>
		<uni-transition mode-class="fade" :show="showEwm">
			<div class="foot-mask" v-if="showEwm" @click="showEwm = false">
				<div class="foot-mask-content" @click.stop>
					<p class="p">{{ $t('foot3') }}</p>
					<image class="ewm" src="https://static.inclusionconf.com/static/images/foot-ewm-old.png" alt="" mode="widthFix">
						<p class="p">{{ $t('foot2') }}</p>
						<image class="close" @click="showEwm = false" src="https://static.inclusionconf.com/static/images/close-icon.png" alt="" mode="widthFix">
				</div>
			</div>
		</uni-transition>
	</div>
</template>

<script>
	import protal from "@/api/protal"

	export default {
		name: 'foot',
		data() {
			return {
				showEwm: false,
				list: [],
				nums: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		created() {
			protal.getJson('foot', data => {
				this.list = data
			})
		},
		methods: {
			link(item) {
				if (item.link == 'updates') {
					this.jsAPI('waitan_overViewMenuClick')
					this.jsAPI('waitan_footClick', {
						contentName_var: '大会简介'
					})
				}
				if (item.link == 'cooperate') {
					this.jsAPI('waitan_joinUsMenuClick')
					this.jsAPI('waitan_footClick', {
						contentName_var: '成为大会合作伙伴'
					})
				}
				if (item.link && (!this.$route.name || this.$route.name === 'home')) {
					const offsetTop = $('#' + item.link).offset().top - 100
					$('html, body').animate({
						scrollTop: offsetTop
					}, 500);
				}
				if (item.link) {
					this.$router.push('/')
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						const offsetTop = $('#' + item.link).offset().top - 100
						$('html, body').animate({
							scrollTop: offsetTop
						}, 500);
					}, 500)
				}
			},
			toWb() {
				this.jsAPI('waitan_wbClick')
				this.jsAPI('waitan_footClick', {
					contentName_var: '微博'
				})
				window.open('https://weibo.com/u/7861219897/', '_blank')
			},
			toXhs() {
				this.jsAPI('waitan_xhsClick')
				this.jsAPI('waitan_footClick', {
					contentName_var: '小红书'
				})
				window.open('https://www.xiaohongshu.com/user/profile/5d7e60990000000001019536?xhsshare=CopyLink&appuid=5808338750c4b462dfeb1eed&apptime=1708484226/', '_blank')
			},
		}
	}
</script>

<style lang="less" scoped>
	.footer {
		padding: 40px 0 0 0;
		// background: url(https://static.inclusionconf.com/static/images/foot-bg-new.png);
		// background-size: 100% calc(100% + 30px);
		background: #131840;

		.footer-top {
			width: 100%;

			.footer-top-left {
				position: relative;

				h5 {
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 20px;
					color: #FFFFFF;
					line-height: 20px;
					padding-left: 18px;
					text-align: left;
					font-style: normal;
					font-weight: normal;
					
					.small {
						color: rgba(255, 255, 255, 0.6);
						font-size: 12px;
					}
				}

				.footer-org {

					.imgs {
						padding: 0 18px;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin: 16px 0 28px;

						.img {
							flex: 0 0 calc(33.3% - 6px);
							overflow: hidden;
							height: auto;
							margin-bottom: 8px;
						}
					}
				}

				.ewm {
					display: none;
					width: 100px;
					height: 100px;
					margin: 16px auto 10px;
				}

				p {
					display: none;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 16px;
					color: rgba(255, 255, 255, 0.8);
					line-height: 16px;
					text-align: center;
					font-style: normal;
				}

				ul {
					display: flex;
					margin: 20px 0 44px;
					padding-left: 11px;

					li {
						flex: 0 0 60px;

						.img {
							width: 30px;
							height: 30px;
							margin: 0 auto 4px;
						}

						span {
							display: block;
							font-family: AlibabaPuHuiTi_2_45_Light;
							font-size: 11px;
							color: #FFFFFF;
							line-height: 20px;
							text-align: center;
							font-style: normal;
						}

						&:not(:last-child) {
							margin-right: 30px;
							position: relative;

							&::after {
								content: "";
								position: absolute;
								left: 75px;
								top: 0;
								bottom: 0;
								border-right: 1px solid rgba(255, 255, 255, 0.20);
							}
						}
					}
				}
			}

			.footer-top-right {

				.right-item {
					padding-left: 18px;
					margin-bottom: 30px;

					.title {
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 16px;
						color: #FFFFFF;
						line-height: 16px;
						text-align: left;
						font-style: normal;
						margin-bottom: 12px;
					}

					.item {
						margin-bottom: 10px;
						display: flex;

						.h3 {
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 12px;
							color: #FFFFFF;
							line-height: 12px;
							text-align: left;
							font-style: normal;
							width: 80px;
						}

						.p {
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 12px;
							color: rgba(255, 255, 255, 0.8);
							line-height: 12px;
							text-align: left;
							font-style: normal;
							margin-right: 12px;
						}
					}

					&:first-child {
						.item p:hover {
							cursor: pointer;
							color: #4D84FF;
						}
					}
				}
			}
		}

		.footer-bottom {
			text-align: center;
			font-family: AlibabaPuHuiTi_3_45_Light;
			font-size: 11px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 16px;
			text-align: center;
			font-style: normal;
			padding: 20px 84rpx 30px;
			box-sizing: border-box;
			width: 678rpx;
			border-top: 1px solid rgba(255, 255, 255, 0.2);
			margin: 0 auto;

			a {
				text-decoration: none;
				color: #fff !important;
			}
		}

		.foot-mask {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;

			.foot-mask-content {
				width: 560rpx;
				height: 680rpx;
				background: #FFFFFF;
				padding-top: 76rpx;
				position: relative;

				.p {
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 20px;
					color: #181818;
					line-height: 24px;
					text-align: center;
					font-style: normal;

					&:last-child {
						color: #666;
					}
				}

				.ewm {
					width: 400rpx;
					display: block;
					margin: 20px auto 10px;
				}

				.close {
					position: absolute;
					width: 24rpx;
					right: 38rpx;
					top: 40rpx;
				}
			}
		}
	}
</style>